<%--
  Created by IntelliJ IDEA.
  User: 代浩楠
  Time: 10:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="css/detail.css"/>
    <link rel="stylesheet" type="text/css" href="css/index.css"/>
    <script type="text/javascript" src="lib/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <style>

        .box {
            width: 100%;
            margin: 100px auto;
            height: 800px;
            background-color: pink;
        }
        .box ul {
            height: 49px;
            line-height: 49px;
            background-color: #ccc;
            border-bottom: 1px solid red;
        }
        .box ul li {
            cursor: pointer;
            text-align: center;
            padding: 0 50px;
            float: left;
            list-style: none;
        }

        .content {
            height: 500px;
        }
        .bot .content {
            display: none;
        }

        #ul2{
            background: pink;
            border-bottom : none;
        }
        #ul2  li {
            list-style: none;
            background-color: pink;
            color: black;
            font-weight: bold;
            width: 100%;
        }

        .small-img {
            width: 268px;
            margin-right: 20px;
            position: relative;
        }

        .small-img img {
            width: 100%;
        }

        .small-img-copy {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            cursor: move;
            z-index: 99;
        }

        .magnifier {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100px;
            height: 100px;
            background-color: rgba(0, 0, 0, .2);
            z-index: 98;
            display: none;
        }

        .big-img {
            width: 350px;
            height: 350px;
            border: 1px solid #eee;
            overflow: hidden;
            position: relative;
            left: -350px;
            top: -300px;
        }

        .big-img img {
            width: 536px;
            position: relative;
            top: 0px;
            left: 0px;
        }
    </style>
</head>
<body>
<header>

    <div class="container-fluid" >
        <nav class="navbar navbar-default" role="navigation" style="border: none">
            <div class="col-lg-8 col-lg-offset-2" >

                <div class="navbar-header">
                    <p class="navbar-brand" >欢迎${username}登录</p>
                </div>
                <div>
                    <ul class="nav nav-tabs navbar-right" style="border-bottom: none">
                        <li ><a href="#" style="color: #5d5d5d">我的订单</a></li>
                        <li ><a href="#" style="color: #5d5d5d">我的分销</a></li>
                        <li ><a href="#" style="color: #5d5d5d">信息中心</a></li>
                        <li ><a href="#" style="color: #5d5d5d">联系我们</a></li>
                        <li ><a href="#" style="color: #5d5d5d">退出</a></li>
                    </ul>
                </div>

            </div>
        </nav>
    </div>

    <div class="container-fluid" >
        <div class="col-lg-8 col-lg-offset-2" style="height: 120px">
            <div class="col-lg-3" style="margin-top: -2%">
                <a href="/loginServlet?m=toIndex">
                    <img src="images/logo.jpg" width="150" height="auto">
                </a>
            </div>
            <div class="col-lg-6" style="margin-top: 3%">
                <form>
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="输入关键字搜索">
                        <span class="input-group-addon btn" style="background: #e94220;color: white;">搜索</span>
                    </div>
                </form>
            </div>
            <div class="col-lg-3" style="margin-top: 3%;">
                <div style="width: 165px;height: 38px;border: 1px solid #c5c5c5;margin-left: 40%">
                    <span class="glyphicon glyphicon-shopping-cart" style="color: red;font-size:18px;margin-top: 5%;margin-left: 5% "></span>
                    <a href="CartServlet?m=toQueryCart" style="font-size:13px;margin-left: 5%;">我的购物车</a>
                    <a href="CartServlet?m=toQueryCart"><span class="badge" style="font-size:13px;margin-left: 5%; background: red">${num}</span></a>
                </div>
            </div>
        </div>
    </div>
    <!--导航栏-->
    <div>
        <nav class="navbar navbar-inverse" role="navigation">
            <div class="col-lg-8 col-lg-offset-2">
                <div>
                    <ul class="nav navbar-nav ul1">
                        <li class="active1"><a href="#">首页</a></li>
                        <li><a href="#">限时抢购</a></li>
                        <li><a href="#">优惠中心</a></li>
                        <li><a href="#">最新资讯</a></li>
                        <li><a href="#">招商入住</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</header>
<hr>
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div style="border: 1px solid #eee;height: 350px">
                <div class="small-img">
                    <img id="img"  src="${book.img}"  class="center-block" style="height: 300px;width: 350px;"/>
                    <div class="small-img-copy"></div>
                    <div class="magnifier"></div>
                </div>
                <div class="big-img">
                    <img src="${book.img}" alt="" id="img2" style="display: none">
                </div>
            </div>
            <div class="row" style="margin-bottom: 25px;"></div>
        </div>
        <div class="col-md-7 col-lg-offset-1">
            <div class="row">
                <div class="pull-left">
                    <img src="images/detail/faguo.png" alt="" width="25px" height="25px"/>
                    <span></span>
                    <span>|<p  id="lianjie" style="font-size: 30px;font-weight: 400;color: #212121;">${book.name}</p></span>
                </div>
                <div class="pull-right">
                    <p style="border: 1px solid #FE0712; color: #FE0712;font-weight: bold;">自营|品牌直采</p>
                </div>

            </div>
            <div class="row">
                <h4 style="font-weight: bold" id="commodity_name">${book.descript}</h4>
            </div>
            <div class="row">
                <div class="panel panel-danger">
                    <div class="panel-heading">
                        <h3 class="panel-title" style="color: #ffffff"><span class="pull-left">
                                <img src="images/detail/xianshi.jpg" style="height: 37px; width: 80px;position: relative;top: -9px;"/>
                            </span>限时特价<span class="pull-right">距结束还有1天12分32秒</span></h3>
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <span>售价</span>
                            <span style="padding-left:25px; color:#FE0712; font-weight: bold;">新人价；<span style="font-size: 25px;">￥${book.price}<span id="price"></span></span></span>
                            <span style="padding-left: 25px;">考虑价<span id="price2">￥${book.price}</span></span>
                            <span style="color: white;background-color:#FE0712;font-size: 12px" >包邮</span>
                        </div>
                        <div class="row " style="margin-left: 20px">
                            <span style="padding-left:25px;font-weight: bold;font-size: 13px"><img src="images/detail/vip.png" alt="" height="17px" width="45.5px" style="color: #1e1e1e;">黑卡会员预计可<span style="color: red;font-size: 12px">省￥2.00</span></span>
                        </div>
                        <div class="row " style="margin-left: 67px">
								<span style="padding-left:25px;font-size: 13px;">会员可享96折<span style="color: red;font-size: 12px;margin-left: 10px"><a
                                        href="">立即开卡</a></span></span>
                        </div>
                        <div class="row " style="margin-left: 20px">
								<span style="padding-left:25px;font-size: 13px"><img src="images/coupon-icon.2cc23d0.png" alt="" height="12.7px">&nbsp;<img src="images/detail/youhui.png" alt="" height="12.7px" width="40px" style="color: #1e1e1e;">先领满599减59优惠券，再下单<span style="color: red;font-size: 12px;margin-left: 10px"><a
                                        href="">点击领取</a></span></span>
                        </div>

                    </div>
                </div>
            </div>
            <br />
            <div class="row">
                <span style="padding-right:40px;">配送</span><span>至<span data-toggle="distpicker">
				<select style="width: 100px;" id="pre" onchange="chg(this);">
                    <option value="-1">请选择</option>
                </select>
                    <select style="width: 100px;" id="city" onchange="chg2(this)" ;></select>
                    <select style="width: 100px;" id="area"></select>
			</span><span style="padding-left: 25px;">免运费</span></span>
            </div>
            <br />
            <div class="row">
                <span style="padding-right:40px;">服务</span><span>由自营国内仓<span style="padding-left: 25px;">发货</span></span>
            </div>
            <br />
            <div class="row" style="margin-left: 45px">
                    <span style="">
                            <img src="images/detail/a1.jpg" alt="" height="35px" width="35px">

                        ——————</span><span><img src="images/detail/a2.png" alt="" height="30px" width="30px">——————<span style=""><img src="images/detail/a3.png" alt="" height="30px" width="30px"></span></span>
            </div>
            <div class="row" style="margin-left: 45px">
                <span style="">品牌直采</span><span style="padding-left: 19px">自营国内仓库发货<span style="padding-left: 37px">武汉市</span></span>
            </div>
            <br />
            <div class="row">
                <span style="padding-right:69px;"></span><span>24点前完成支付，预计6月4日（周二）送达<span style="padding-left: 25px;"></span></span>
            </div>
            <br />
            <div class="row">
                <span style="padding-right:40px;" class="pull-left">数量</span>
                <div class="col-md-3">
                    <form class="bs-example bs-example-form" role="form">
                        <div class="input-group input-group-sm">
                            <span class="input-group-addon reduce" id="reduce" style="cursor: pointer">-</span>
                            <input type="text" class="form-control values" value="1" style="text-align: center" id="num">
                            <span class="input-group-addon add" id="add" style="cursor: pointer">+</span>
                        </div>
                    </form>
                </div>
            </div>
            <br />

            <br />
            <div class="row" style="font-size: 12px">
                <span style="padding-right:40px;">说明</span><span class="glyphicon glyphicon-ok-circle">会员96折<i class="glyphicon glyphicon-ok-circle" style="padding-left: 25px;">正品保障</i><span style="padding-left: 25px;" class="glyphicon glyphicon-ok-circle">支持30天无忧退货</span></span>
            </div>
            <br />
            <br />
            <div class="row">
                <div class="col-md-8 col-md-offset-1">
                    <button type="button" class="btn btn-default btn-lg" style="margin-right: 35px;">
                        立即购买
                    </button>
                    <a href="CartServlet?m=toCart&&name=${book.name}&&price=${book.price}&&img=${book.img}" class="btn btn-danger btn-lg" style="margin-right: 35px;">
                        加入购物车
                    </a>
                    <span style="font-size: 20px;color: red">♡</span><span style="margin-left: 2px;">收藏</span>
                </div>
            </div>

        </div>

    </div>
</div>
<footer>
    <div class="container-fluid">
        <div class="col-lg-12" style="background: linear-gradient(90deg,#2bc8ff,#329fff);height: 300px;margin-top: 20px">
            <div class="col-lg-8 col-lg-offset-2" style="margin-top: 20px">
                <div class="col-lg-3 col-lg-offset-5">
                    <p style="font-size: 35px;color: white;margin: 0">网上书城</p>
                    <span style="margin-left: 0;font-size: 18px;color: white">
                CRAFTSMANSHIP
            </span>
                </div>
                <div class="col-lg-6 col-lg-offset-3" style="margin-top: 20px">
                    <ul class="menuU ">
                        <li id="hot" class="rflex isLi" pageid="41905" showpc="">
                            <a class="mainMenuSet Nosub" href="index.html">
                                首页
                            </a>
                        </li>
                        <li class="rflex isLi" pageid="41906" showpc="">
                            <a class="mainMenuSet Nosub" href="41906-41906.html">
                                限时抢购
                            </a>
                        </li>
                        <li class="rflex isLi" pageid="41907" showpc="">
                            <a class="mainMenuSet Nosub" href="41907-41907.html">
                                优惠中心
                            </a>
                        </li>
                        <li class="rflex isLi" pageid="41908" showpc="">
                            <a class="mainMenuSet Nosub" href="41908-41908.html">
                                最新资讯
                            </a>
                        </li>
                        <li class="rflex isLi" pageid="41912" showpc="">
                            <a class="mainMenuSet Nosub" href="41912-41912.html">
                                招商入驻
                            </a>

                        </li>

                    </ul>
                </div>
                <div class="col-lg-12">
                    <img class="picSet link-type-" src="images/20180721165807339.png" title="" alt="描述"  style="display: inline;margin-bottom: 5px">
                    <span names="text" class="view_contents" style="color: #ffffff; font-size: 18px;">
                联系电话：020-3333 3333
            </span>
                    <img class="picSet link-type-" src="images/2018072116591333.png" title="" alt="描述"  style="display: inline;margin-left: 20px;margin-bottom: 5px">
                    <span names="text" class="view_contents"  style="color: #ffffff; font-size: 18px;">
					邮箱：craftsmanship@mail.com
            </span>
                    <img class="picSet link-type-" src="images/20180721165928751.png" title="" alt="描述"  style="display: inline;margin-left: 20px;margin-bottom: 5px">
                    <span names="text" class="view_contents"  style="color: #ffffff; font-size: 18px;">
					中心地址：广东省广州市大马路208号5-038
            </span>
                </div>
                <div class="col-lg-6 col-lg-offset-3" style="margin-top: 20px;font-size: 16px;color: #ffffff;text-align: center;"  >
                    copyright@2018 craftsmanship All rights reserved.
                </div>
            </div>
        </div>
</footer>
<script src="js/detail.js"></script>
<script>
    //放大镜
    let magnifier = document.getElementsByClassName("magnifier")[0],
        //小图
        smallImgCopy = document.getElementsByClassName("small-img-copy")[0],
        //大图
        bigImg = document.getElementsByClassName("big-img")[0].firstElementChild;
    var img2 = document.getElementById("img2");
    //小图鼠标移入显示放大镜
    smallImgCopy.onmouseover = function () {
        magnifier.style.display = "block";
        bigImg.style.display="block";
        img2.style.display="block";
    }
    //小图鼠标移动事件，即放大镜移动
    smallImgCopy.onmousemove = function (e) {
        //当移动到小于50（放大镜宽度的一半）时
        //放大镜和大图移动到盒子的左边缘
        if (e.offsetX <= 50) {
            magnifier.style.left = 0 + "px";
            bigImg.style.left = 0 + "px";
        }
            //当移动到大于218（小图宽度减放大镜宽度的一半）时
        //放大镜和大图移动到盒子的右边缘
        else if (e.offsetX >= 218) {
            magnifier.style.left = 168 + "px";
            bigImg.style.left = -336 + "px";
        }
            //如果以上两个条件都不成立
            //放大镜移动的距离等于鼠标位置减50（放大镜宽度的一半）
        //大图移动的距离等于 负（小图偏移量/小图最大偏移量*大图最大偏移量）+“px”
        else {
            magnifier.style.left = e.offsetX - 50 + "px";
            bigImg.style.left = -((e.offsetX - 50) / 168) * 336 + "px";
        }
        //Y轴移动方式同理
        if (e.offsetY <= 50) {
            magnifier.style.top = 0 + "px";
            bigImg.style.top = 0 + "px";
        } else if (e.offsetY >= 352) {
            magnifier.style.top = 302 + "px";
            bigImg.style.top = -602 + "px";
        } else {
            magnifier.style.top = e.offsetY - 50 + "px";
            bigImg.style.top = -((e.offsetY - 50) / 302) * 602 + "px";
        }
    }
    //小图鼠标移出隐藏放大镜

    smallImgCopy.onmouseout = function () {
        magnifier.style.display = "none";
        bigImg.style.display="none";
        img2.style.display="none";
    }
</script>
</body>
</html>


